<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <head>
        <style>
            div.gallery {
                border: 1px solid #ccc
            }

            div.gallery:over {
                border: 1px solid #777;
            }

            div.gallery img {
                width: 100%;
                height: auto;
            }

            div.desc {
                padding: 15px;
                text-align: center;
            }

            * {
                box-sizing: border-box;
            }

            .responsize {
                padding: 0 6px;
                float: left;
                width: 24.99999%;
                margin: 6px 0;
            }

            @media only screen and(max-width:700px) {
                .responsive {
                    width: 49.999999%;
                    margin: 6px 0;
                }
            }

            media only screen and (max-width: 500px) {
                .responsive {
                    width: 100%;
                }
            }

            .clearfix:after {
                content: "";
                display: table;
                clear: both;
            }
        </style>
    </head>

   
        <div class="responsive">
            <div class="gallery">
                <a target="_blank" href="../w3logo-1.png">
                    <img src="../w3logo-1.png" alt="花草" width="600" height="400">
                </a>
                <div class="desc">在此处添加图像描述</div>
            </div>
        </div>
        <div class="responsive">
            <div class="gallery">
                <a target="_blank"
                    href="../图片/src=http---wx3.sinaimg.cn-large-8a533d85ly1frt4vaopxgj21hc0xcakt.jpg&refer=http---wx3.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg.jpg">
                    <img src="../图片/eg_venus.gif" alt="花花草草" width="600" height="400">
                </a>
                <div class="desc">在此处添加图像描述</div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div style="padding:6px;">
            <p>本例使用媒体查询来重新排列不同屏幕尺寸的图像：对于宽于 700 像素的屏幕，它将并排显示四幅图像；对于小于 700 像素的屏幕，将并排显示两幅图像。对于小于 500 像素的屏幕，图像将垂直堆叠（100％）。
            </p>
            <p>您稍后将在我们的 CSS 教程中学到有关媒体查询和响应式 Web 设计的更多知识。</p>
        </div>
    </body>

</html>